<template>
  <el-sub-menu v-if="hasChildren" :index="item.path">
    <template #title>
      <el-icon><component :is="item.icon" /></el-icon>
      <span>{{ item.label }}</span>
    </template>
    <MenuItem
      v-for="child in item.children"
      :key="child.path"
      :item="child"
    />
  </el-sub-menu>
  <el-menu-item v-else :index="item.path" @click="handleClick">
    <el-icon><component :is="item.icon" /></el-icon>
    <template #title>{{ item.label }}</template>
  </el-menu-item>
</template>

<script setup>
import { computed } from 'vue';

// 定义 props
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

// 确保 children 是一个数组，即使它是 undefined 或 null
const normalizedChildren = computed(() => {
  return Array.isArray(props.item.children) ? props.item.children : [];
});

// 判断是否有子菜单
const hasChildren = computed(() => {
  return normalizedChildren.value.length > 0;
});

// 点击菜单项的处理函数（可选）
const handleClick = (event) => {
  console.log('Menu item clicked:', props.item.path);
};
</script>

<style scoped>

/* 如果需要额外样式可以在这里添加 */
</style>